<template>
  <div class="flex items-center justify-center">
    <div
      @click="clickInput"
      :style="{ backgroundColor: backgroundColor }"
      :class="['fake-input', active ? 'active' : '']"
    >
      <!-- 默认使用搜索icon -->
      <span
        v-if="!slot['input-icon']"
        class="iconfont icon-sousuo font-size-20 w-20 h-20 lh-20 text-center m-r-5 color-3"
      ></span>
      <span
        v-else
        class="font-size-20 w-20 h-20 lh-20 text-center m-r-5 color-3"
      >
        <slot name="input-icon"></slot>
      </span>
      <!-- 输入值 -->
      <scroll-view
        scroll-x
        class="input-value"
        :scroll-left="scrollLeft"
        v-show="props.modelValue"
      >
        {{ props.modelValue }}
      </scroll-view>
      <!-- 光标 -->
      <span
        v-if="props.saomaType === commonStore.saomaType"
        class="cursor"
      ></span>
      <!-- 占位符 -->
      <span v-show="!props.modelValue" class="color-3 input-value">
        {{ props.placeholder }}
      </span>

      <div
        v-if="props.clearable && props.modelValue"
        @click="cliclkClear"
        class="iconfont icon-guanbi1 font-size-16"
        style="margin-left: auto"
      ></div>
    </div>

    <div
      v-if="props.isCancelBtn"
      class="cancel-bt m-l-14"
      v-show="active"
      @click.stop="clickCancel"
    >
      {{ props.searchBtText }}
    </div>
    <slot  name="input-bt"></slot>
  </div>
</template>
<script setup>
import { ref, watch, nextTick } from "vue";
import { useCommonStore } from "@/store/common";
const commonStore = useCommonStore();
const slot = defineSlots();
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "扫描或输入商品条码 / 商品首字母拼音",
  },
  active: {
    type: Boolean,
    default: false,
  },
  backgroundColor: {
    type: String,
    default: "#fff",
  },
  saomaType: {
    type: String,
    default: "",
  },
  searchBtText: {
    type: String,
    default: "取消",
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  isCancelBtn:{
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(["update:modelValue", "clickInput", "cancelBt"]);

function cliclkClear() {
  emit("update:modelValue", "");
}
function clickInput() {
  emit("clickInput");
}
function clickCancel() {
  emit("cancelBt");
}

const scrollLeft = ref(0);
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal.length > 0) {
      nextTick(() => {
        scrollLeft.value = newVal.length * 20;
      });
    }
  }
);
</script>
<style lang="scss" scoped>
$h: 50rpx;
$py: 13rpx;
$px: 20rpx;
$fsz: 16rpx;

.fake-input {
  flex: 1;
  width: 0;
  padding: $py $px;
  // height: $h;
  line-height: $h;

  border: 1px solid $uni-border-color-1;
  border-radius: 8rpx;
  font-size: $fsz;

  display: flex;
  align-items: center;
  cursor: text;
  white-space: pre-wrap;
  position: relative;
  line-height: 24rpx;

  .input-value {
    overflow-x: auto;
    width: initial;
  }
}

.cancel-bt {
  width: 68rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background-color: $uni-color-primary;
  color: $uni-text-color-inverse;
  border-radius: 8rpx;
  font-size: 18rpx;
}

.active {
  border-color: $input-active;
}

.cursor {
  width: 1px;
  height: calc($h - $py - $py - 4rpx);
  background-color: $uni-text-color-3;
  margin-left: 1rpx;
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
</style>
